import React, {ReactNode} from 'react'
import {Container} from '../../../ui/layout/Container'
import {connectComponent} from '../../../store/utils'
import {Link} from 'react-router-dom'
import {ButtonLink} from '../../../ui/button/ButtonLink'
import {CONSTANTS} from '../../../../constants'
import {bindErrorActions, ErrorActionsType} from '../../../store/action/error'
import {AuthActionsType, bindAuthActions} from '../../../store/action/auth'
import {Dropdown} from '../../../ui/dropdown/Dropdown'
import {DropdownToggle, DropdownToggleType} from '../../../ui/dropdown/DropdownToggle'
import {DropdownMenu} from '../../../ui/dropdown/DropdownMenu'
import {DropdownItem} from '../../../ui/dropdown/DropdownItem'
import {LSKeys} from '../../../storage'
import {mdiBasket, mdiHistory} from '@mdi/js'
import {getAuthPageUrl} from '../../../utils/auth'
import {UserDto} from '../../../../api/UserDto'

interface HeaderProps {
  authUser: UserDto
  isLogin: boolean
  errorActions: ErrorActionsType
  authActions: AuthActionsType
}

const Header: React.FC<HeaderProps> = ({
  authUser,
  isLogin,
  errorActions,
  authActions,
}): React.ReactElement => {
  const renderAuthButton = (): ReactNode => {
    if (isLogin) {
      let renderButton: React.ReactElement = null
      if (authUser) {
        renderButton = (
          <div className={'d-flex flex-row'}>
            <ButtonLink
              href={'/order-history'}
              style={'outline'}
              size={'sm'}
              iconPath={mdiHistory}
              className={'mb-0'}>
              История заказов
            </ButtonLink>
            <ButtonLink
              href={'/cart'}
              style={'outline'}
              size={'sm'}
              iconPath={mdiBasket}
              className={'ml-x4 mb-0'}>
              Корзина
            </ButtonLink>
            <Dropdown id={'Dropdown6'} direction={'auto'}>
              <DropdownToggle
                type={DropdownToggleType.textButton}
                textButtonStyle={'text'}
                textButton={'Профиль'}
                className={'ml-x4'}
              />
              <DropdownMenu>
                <DropdownItem text={'Профиль'} link={CONSTANTS.webUrl + '/profile'} borderBottom />
                <DropdownItem
                  text={'Выйти'}
                  onClick={async (): Promise<void> => {
                    authActions.setState({user: null, cart: undefined})
                    localStorage.removeItem(LSKeys.TOKEN)
                    window.location.replace(CONSTANTS.webUrl + '/auth/singin')
                  }}
                />
              </DropdownMenu>
            </Dropdown>
          </div>
        )
      } else {
        renderButton = (
          <ButtonLink
            href={getAuthPageUrl()}
            style={'outline'}
            size={'sm'}
            className={'ml-x4 mb-0'}>
            Войти
          </ButtonLink>
        )
      }
      return <div className={'d-flex align-items-center'}>{renderButton}</div>
    } else {
      return <div />
    }
  }

  return (
    <header className={'header'}>
      <Container>
        <div className={'header-content'}>
          <Link className={'text-'} to={'/'}>
            Меню
          </Link>
          {renderAuthButton()}
        </div>
      </Container>
    </header>
  )
}

export default connectComponent(
  (state) => ({
    authUser: state.auth.user,
  }),
  (dispatch) => ({
    errorActions: bindErrorActions(dispatch),
    authActions: bindAuthActions(dispatch),
  }),
  Header,
)
